{% extends 'basic_app/master.html' %}
{% block tag_left %}
    {% include 'oratk_app/tag_left_user.html' %}
{% endblock %}
{% block title %}
    <title>ORATK</title>
{% endblock %}
{% block userinfo %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <form name="Form" role="search" action="/oratk_app/oratk_most_box_ajax" onsubmit="return validateForm()"
              target="_blank" method="POST" id="ajax_form_sumit">
            <h3 class="page-header">表空间信息</h3>
            <div class="navbar-form navbar-left">
                &nbsp 选择实例: &nbsp
                {#                <select class="form-control" name="conn_string" id="conn_string">#}
                <select class="selectpicker show-tick " style="width:450px" data-live-search="true" name="conn_string"
                        id="conn_string">

                    <option id="def">--请选择实例名--</option>
                    <optgroup label="total:{{ instanceinfo_result_total }}">
                        {% for i in instanceinfo_result %}
                            <option
                                    data-content="
                <div>{{ i.id }}.{{ i.dbname }}</div>
                <div style='padding-left: 15px;'><small>{{ i.conn_string }}</small></div>
            "
                                    value="{{ i.id }}.{{ i.dbname }}={{ i.conn_string }}">
                            </option>
                        {% endfor %}
                    </optgroup>
                </select>
                &nbsp
                <button type="button" data-loading-text="Loading..." class="btn btn-default btn-primary" id="btSearch">
                    查询(本页展示）
                </button>
                <button type="submit" class="btn btn-default btn-primary" id="btSearch_new">查询(新页展示）</button>
                <div>&nbsp</div>
                <div>

                    <div class="checkbox-inline">
                        <label>
                            <input type="checkbox" id="box_tablespace_used_rate" name="box_val" checked readonly
                                   value="tablespace_used_rate"> tablespace_used_rate
                        </label>
                    </div>
                    <div class="checkbox-inline">
                        <label>
                            <input type="checkbox" id="box_temp_info_new" name="box_val"
                                   value="temp_info_new">temp_info_new
                        </label>
                    </div>
                    <div class="checkbox-inline">
                        <label>
                            <input type="checkbox" id="box_undo_info" name="box_val" value="undo_info"> undo_info
                        </label>
                    </div>
                    <div class="checkbox-inline">
                        <label>
                            <input type="checkbox" id="box_para_db_create_file" name="box_val" value="db_create_file">
                            db_create_file
                        </label>
                    </div>
                </div>
                <div>&nbsp</div>
                <div id="tab_detail_0"></div>
                <div id="tab_detail" table_count={{ table_count }}>
                </div>
            </div>
        </form>
    </div>

    </div>

{% endblock %}

{% block script %}
    <script>
        //新页展示按钮执行前判断输入框是否有空值
        function validateForm() {
            var select_conn = $('#conn_string').find("option:checked").attr("id")
            if (select_conn == 'def') {
                alert('请选择实例')
                return false;
            }
        }


        $('#btSearch').click(function () {
            var select_conn = $('#conn_string').find("option:checked").attr("id")
            if (select_conn == 'def') {
                alert('请选择实例')
                return;
            }
            //发送ajax请求
            let data = $('#ajax_form_sumit').serialize();
            $.ajax({
                type: "POST",
                data: data,
                url: "/oratk_app/oratk_most_box_ajax", //后台处理函数的url
                cache: false,
                dataType: "html",
                beforeSend: function () {
                    // $('#loadingModal').modal({backdrop: 'static', keyboard: false});
                    showLoading();
                    $('#btSearch').button('loading')
                },
                complete: function () {
                    //$('#loadingModal').modal('hide');
                    hideLoading();
                    $('#btSearch').button('reset')
                },
                success: function (result) {
                    $("#tab_detail").html(result);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    showconnectionAlert(XMLHttpRequest, textStatus, errorThrown)
                },
            })

        })

    </script>
    <script>
        //循环生成 table

    </script>
{% endblock %}